﻿<div ng-controller="topicController">
    <div class="wrapper border-bottom white-bg page-heading">
        <div class="col-lg-pull-12">
            <ol class="breadcrumb">
                <li><a ui-sref="app.product.topic">专题详情</a></li>
                <li class="active" ng-bind="breadcrumb"></li>
            </ol>
        </div>
    </div>
    <form name="_form" class="form-horizontal w5c-form" w5c-form-validate="model.validateOptions" validfail="save_fail()" novalidate role="form">
        <div class="panel">
            <div class="panel-body">
                <div class="row">
                    <label class="col-md-1 control-label" style="padding-left:0px;"><b>专题信息</b></label>
                    <div class="col-md-11">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">专题标题</label>
                            <div class="col-sm-5">
                                <input type="text" name="title " class="form-control input-sm" ng-model="model.title" ng-maxlength="100">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="text-danger">*</span>展示图片</label>
                            <div class="col-sm-5">
                                <input type="file" name="file" accept="image/*" multiple="multiple" class="form-control input-sm" ngf-select ng-model="model.file">
                                <input type="hidden" name="show_images" class="form-control" ng-model="model.show_images" />
                                <div ui-sortable ng-model="model.show_images">
                                    <!--<div class="img-thumbnail pull-left" ng-repeat="img in model.show_images " style="position:relative;margin-right:5px;">
                                        <button type="button" class="close" ng-click="delete_image(img)" style="position:absolute;right:6px;">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <img ng-src="{{site.img_url+img}}" class="img-thumbnail" ng-show="model.show_images" width="60" height="60">
                                    </div>-->
                                    <img ng-src="{{siteImg+model.show_images}}" class="img-thumbnail" ng-show="model.show_images">
                                </div>
                                <div class="clearfix"></div>
                                <!--<p style="margin-top:10px;">
                                    建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。
                                </p>-->
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="text-danger">*</span>轮播图片</label>
                            <div class="col-sm-5">
                                <input type="file" name="file" accept="image/*" multiple="multiple" class="form-control input-sm" ngf-select ng-model="model.file1">
                                <input type="hidden" name="banner" class="form-control" ng-model="model.banner" />
                                <div ui-sortable ng-model="model.banner">
                                    <!--<div class="img-thumbnail pull-left" ng-repeat="img in model.banner" style="position:relative;margin-right:5px;">
                                        <button type="button" class="close" ng-click="delete_image(img)" style="position:absolute;right:6px;">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <img ng-src="{{site.img_url+img}}" class="img-thumbnail" ng-show="model.banner" width="60" height="60">
                                    </div>-->
                                    <img ng-src="{{siteImg+model.banner}}" class="img-thumbnail" ng-show="model.banner">
                                </div>
                                <div class="clearfix"></div>
                                <p style="margin-top:10px;">
                                    建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。
                                </p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">展示方式</label>
                            <div class="col-sm-3">
                                <select class="form-control input-sm" ng-model="model.show_type ">
                                    <option value="">选择展示类型</option>
                                    <option value="1">幻灯片</option>
                                    <option value="2">专区</option>
                                    <option value="3">专题精选</option>
                                    <option value="4">专题</option>
                                    <option value="5">带你看世界</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <hr />
                <div class="row" id="row">
                    <label class="col-md-1 control-label" style="padding-left:0px;"><b>分组</b></label>
                    <div class="col-md-11">
                        <div class="form-group">
                            <div class="col-sm-2">
                                <p class="form-control-static"><a ng-click="createGroup()">新增分组</a></p>
                            </div>
                        </div>
                        <div class="col-sm-10" ng-show="model.topic_groups.length>0">
                            <div class="form-control-static" ng-repeat="(key,item) in model.topic_groups" ng-init="outerIndex = $index">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">分组名称</label>
                                    <div class="col-sm-3">
                                        <input type="text" name="name" class="form-control input-sm" ng-model="item.name" ng-maxlength="100">
                                    </div>
                                    <div class="col-sm-4">
                                        <p class="form-control-static"><a ng-click="openModal($index)">增加商品</a>&nbsp;|&nbsp;<a ng-click="deleteGroup($index)">删除分组</a>&nbsp;|&nbsp;<a ng-click="isShow()">显示商品</a></p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label"><span class="text-danger">*</span>分组图片</label>
                                    <div class="col-sm-5">
                                        <input type="file" name="file" accept="image/*" multiple="multiple" class="form-control input-sm" ngf-select ng-model="item.file">
                                        <input type="hidden" name="imgs" class="form-control" ng-model="item.show_images" />
                                        <div ui-sortable ng-model="item.show_images">
                                            <!--<div class="img-thumbnail pull-left" ng-repeat="img in item.show_images " style="position:relative;margin-right:5px;">
                                                <button type="button" class="close" ng-click="delete_image(img)" style="position:absolute;right:6px;">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <img ng-src="{{site.img_url+img}}" class="img-thumbnail" ng-show="item.show_images" width="60" height="60">
                                            </div>-->
                                            <img ng-src="{{siteImg+item.show_images}}" class="img-thumbnail" ng-show="item.show_images">
                                        </div>
                                        <div class="clearfix"></div>
                                        <p style="margin-top:10px;">
                                            建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。
                                        </p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品</label>
                                    <div class="col-sm-10">
                                        <table class="table table-hover">
                                            <!--<caption><a href="javascript:void(0);" ng-click="add_product_property()">新增</a></caption>-->
                                            <thead>
                                                <tr>
                                                    <th>商品名称</th>
                                                    <th>商品详情</th>
                                                    <th width="75">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="(key,row) in item.topic_products track by $index">
                                                    <td><input ng-model="row.product.name" class="form-control input-sm" w5c-dynamic-name2="item.name_{{key}}" required /></td>
                                                    <td><textarea ng-model="row.product.short_description" rows="4" class="form-control input-sm" w5c-dynamic-name2="item.value_{{key}}" required /></td>
                                                    <td>
                                                        <a class="btn btn-primary btn-xs" ng-click="delete($index,outerIndex)"><i class="fa fa-trash"></i> 删除</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-6">
                <button type="submit" w5c-form-submit="save()" class="btn btn-primary btn-sm" btn-loading="psdisabled" loading-text="保存中...">
                    <i class="fa fa-save"></i> 保存
                </button>
                <button ng-click="goBack()" class="btn btn-primary btn-sm"><i class="fa fa-rotate-left"></i> 取消</button>
            </div>
        </div>
    </form>
</div>
<script type="text/ng-template" id="modal.html">
    <p>
    <p class="modal-header"><h5 class="modal-title" align="center">商品列表</h5></p>
    <table class="table table-hover m-t-md">
        <thead>
            <tr>
                <th></th>
                <th>名称 价格</th>
                <th width="80">库存</th>
                <th width="80">总销量</th>
                <th width="100">创建时间</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in data.rows">
                <td><input type="checkbox" name="product" value="{{item.id}}" /></td>
                <td>
                    <div class="media">
                        <div class="media-left">
                            <a href="{{siteImg+item.image_path[0]}}" target="_blank" class="thumbnail" style="width:60px;height:60px;">
                                <img ng-src="{{siteImg+item.image_path[0]}}" ng-show="item.image_path" width="60" height="60">
                            </a>
                        </div>
                        <div class="media-body">
                            <p class="media-heading">{{item.name}}</p>
                            <span>{{item.price | currency:'￥'}}</span>
                        </div>
                    </div>
                </td>
                <td>{{item.stock}}</td>
                <td>{{item.sale_count}}</td>
                <td>{{item.create_time}}</td>
            </tr>
        </tbody>
    </table>
    <div class="row">
        <div class="col-md-10">
            <uib-pagination total-items="data.total_result" items-per-page="data.size" ng-model="data.page" num-pages="list.total_pages"
                            ng-change="search_page(data.page)" class="pagination-sm" boundary-links="true" boundary-link-numbers="true" max-size="20"
                            previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
            <span class="pull-right" style="margin: 30px 0px 20px 0px">共{{data.total_result}} 当前：{{data.page}}/{{data.total_pages}}</span>
        </div>
    </div>
    </p>
    <p class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">
            确认
        </button>
        <button class="btn btn-warning" ng-click="cancel()">
            退出
        </button>
    </p>
    </p>
</script>
<style type="text/css">
    .large-Modal .modal-dialog {
        height: 1000px;
        width: 1000px;
        /*margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;*/
    }
</style>